<%@ page import="xyz.vmcserver.wdibbs.model.vo.User" %><%--
  Created by IntelliJ IDEA.
  User: 11382
  Date: 2022/5/16
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <style>
        .description{
            margin: 0;
            padding: 0;
        }
        .description>button{
            line-height: 10px;
            font-size: 10px;
        }
        th{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<%--导入依赖--%>
<%--页面二级标题--%>
<jsp:include page="/WEB-INF/pages/module/head.jsp">
    <jsp:param name="title_2" value="用户组信息页"/>
</jsp:include>
<%--导入导航栏--%>
<jsp:include page="/WEB-INF/pages/module/navbar.jsp">
    <jsp:param name="permission" value="1"/>
</jsp:include>
<% int permission;
    if(null!=session.getAttribute("permission")){
        permission= (Integer) session.getAttribute("permission");
    }
    else{
        permission=0;
        session.setAttribute("permission",permission);
    }
    User isLoginUser;
    if(null!=session.getAttribute("isLoginUser")){
        isLoginUser= (User) session.getAttribute("isLoginUser");
    }
    else{
        isLoginUser = new User(-1,"","游客","游客",0,"notLogin.jpg");
    }

%>
<div class="container">
    <h1 style="text-align: center">用户组详细信息</h1>
    <table class="table table-hover table-bordered table-sm" style="text-align: center">
        <thead>
        <tr>
            <th scope="col" class="col-1">编号</th>
            <th scope="col" class="col-2">组ID</th>
            <th scope="col" class="col-2">组名</th>
            <th scope="col" class="col-1">所需积分</th>
            <th scope="col" class="col-1">拥有权限</th>
            <th scope="col" class="col-4">组描述</th>
            <% if(permission>=150) {%>
            <th scope="col" class="col-1">修改</th>
            <%}%>
        </tr>
        </thead>
        <tbody>
            <c:forEach items="${userGroupList}" var="ugi">


                <tr <c:if test="${ugi.permission==permission}" var="sc" scope="page">class="table-info"</c:if>>
                    <td scope="row">${ugi.id}</td>
                    <td>${ugi.group_alias}</td>
                    <td <c:if test="${ugi.permission==permission}" var="sc" scope="page">style="color: #0d6efd" </c:if>>
                        ${ugi.group_name}<c:if test="${ugi.permission==permission}" var="sc" scope="page">(你的用户组)</c:if></td>
                    <td>${ugi.floor_score}</td>
                    <td>${ugi.permission}</td>
                    <td>
                        <p class="description">
                            <c:if test="${ugi.description.length()>15}">

                        ${ugi.description.substring(0,15)}..... &nbsp;
                            <button class="btn btn-outline-primary show-desc" type="button" data-bs-toggle="collapse" data-bs-target="#desc${ugi.id}" aria-expanded="false" aria-controls="desc${ugi.id}">
                                查看详情
                            </button>
                            </c:if>
                        </p>
                    </td>
                    <div class="collapse" id="desc${ugi.id}">
                        <div class="card card-body">
                                [${ugi.group_name}]组描述:
                            <br>${ugi.description}
                            <button class="btn btn-outline-primary show-desc" type="button">
                                收起
                            </button>
                        </div>
                    </div>
                    <% if(permission>=150) {%>
                    <td>
                        <button class="btn btn-primary change-btn" type="button" data-bs-toggle="offcanvas" name="${ugi.group_alias}"
                                data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" style="font-size: 8px;line-height: 8px" id="changeGroup">
                            修改
                        </button>
                    </td>
                    <%}%>
                </tr>
            </c:forEach>
        </tbody>
    </table>


<%
    if (permission >= 150) {


%>
    <div style="text-align: center">
        <button class="btn btn-primary change-btn" type="button" id="addGroup" style="width: 500px" data-bs-toggle="offcanvas" data-bs-target="#addUserGroup" aria-controls="addUserGroup">
            添加用户组
        </button>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasRightLabel">用户组信息修改</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" id="changeUserGroupOffcanvas">
            <form name="groupInfoChangeForm" action="${pageContext.request.contextPath}/user/groupChange.do" method="post">
                <div class="mb-3">
                    <label for="group_alias" class="form-label">组ID</label>
                    <input type="text" class="form-control" id="group_alias" aria-describedby="group_alias_help" name="group_alias" disabled>
                    <div id="group_alias_help" class="form-text">组的唯一名,该属性一经创立，无法修改。</div>
                </div>
                <div class="mb-3">
                    <label for="group_name" class="form-label">组名</label>
                    <input type="text" class="form-control" id="group_name" aria-describedby="group_name_help" name="group_name">
                    <div id="group_name_help" class="form-text">用户组名</div>
                </div>
                <div class="mb-3">
                    <label for="floor_score" class="form-label">所需积分</label>
                    <input type="text" class="form-control" id="floor_score" aria-describedby="floor_score_help" name="floor_score">
                    <div id="floor_score_help" class="form-text">达到该用户组最低需求的积分值</div>
                </div>
                <div class="mb-3">
                    <label for="permission" class="form-label">组的权限</label>
                    <input type="text" class="form-control" id="permission" aria-describedby="permission_help" name="permission">
                    <div id="permission_help" class="form-text">该用户组所拥有的权限</div>
                </div>
                <div class="mb-3">
                    <label for="description" class="form-label">组描述</label>
                    <input type="text" class="form-control" id="description" aria-describedby="description_help" name="description">
                    <div id="description_help" class="form-text">该用户组的相关描述</div>
                </div>
                <h1>
                    <a class="btn btn-danger" role="button" data-bs-toggle="modal" data-bs-target="#groupDelModal">删除组(危险)</a>
                    <button type="submit" class="btn btn-primary" id="saveChange" >提交修改</button>
                </h1>
            </form>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addUserGroup" aria-labelledby="addUserGroupLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="addUserGroupLabel">添加新的用户组</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" id="addUserGroupOffcanvas">
            <form name="groupInfoChangeForm" action="${pageContext.request.contextPath}/user/addUserGroup.do" method="post">
                <div class="mb-3">
                    <label for="group_alias_add" class="form-label">组ID</label>
                    <input type="text" class="form-control" id="group_alias_add" aria-describedby="group_alias_help" name="group_alias">
                    <div id="group_alias_add_help" class="form-text">组的唯一名,该属性一经创立，无法修改，请慎重填写。</div>
                </div>
                <div class="mb-3">
                    <label for="group_name_add" class="form-label">组名</label>
                    <input type="text" class="form-control" id="group_name_add" aria-describedby="group_name_help" name="group_name">
                    <div id="group_name_add_help" class="form-text">用户组名</div>
                </div>
                <div class="mb-3">
                    <label for="floor_score_add" class="form-label">所需积分</label>
                    <input type="text" class="form-control" id="floor_score_add" aria-describedby="floor_score_help" name="floor_score">
                    <div id="floor_score_add_help" class="form-text">达到该用户组最低需求的积分值</div>
                </div>
                <div class="mb-3">
                    <label for="permission_add" class="form-label">组的权限</label>
                    <input type="text" class="form-control" id="permission_add" aria-describedby="permission_help" name="permission">
                    <div id="permission_add_help" class="form-text">该用户组所拥有的权限，请慎重填写</div>
                </div>
                <div class="mb-3">
                    <label for="description_add" class="form-label">组描述</label>
                    <input type="text" class="form-control" id="description_add" aria-describedby="description_help" name="description">
                    <div id="description_add_help" class="form-text">该用户组的相关描述</div>
                </div>
                <h1 style="text-align: right">
<%--                    <button type="submit" class="btn btn-primary" id="saveAdd" >新建组</button>--%>
                    <button class="btn btn-primary" id="saveAdd" >新建组</button>
                </h1>
            </form>
        </div>
    </div>
    <div class="modal" tabindex="-1" id="groupDelModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户组删除确认</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>删除组是高危操作，可能导致数据混乱，确实要这么做吗？如果确定，你需要指定当前用户组被删除后，组内用户迁移的组ID。</p>
                    <div class="mb-3">
                        <input type="text" class="form-control" id="moveToByGroupAlias" aria-describedby="description_help" name="description">
                        <div id="moveToByGroupAlias_help" class="form-text">请指定要迁移到的组ID</div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消修改</button>
                    <button type="button" class="btn btn-danger" id="confirmDel" data-bs-dismiss="modal">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function (){
            $("td").on('click',"button",function (){
                // alert($(this).attr(name).text())
                function printGroupInfo(dataJ){
                    // alert(dataJ.group_name)
                    // $("#changeUserGroupOffcanvas").children().remove()
                    $("#group_alias").val(dataJ.group_alias)
                    $("#group_name").val(dataJ.group_name)
                    $("#floor_score").val(dataJ.floor_score)
                    $("#permission").val(dataJ.permission)
                    $("#description").val(dataJ.description)
                }
                $.ajax({
                    url:"/user/getGroupInfo",
                    data:{"group_alias":$(this).attr("name")},
                    success:function (data) {
                        // alert("name:"+$(this).attr("name"))
                        printGroupInfo(data);
                    }
                });
            });
            $("#confirmDel").click(function (){
                // alert("迁移到的组ID"+$("#moveToByGroupAlias").val())
                $("#moveToByGroupAlias").val("")
                alert("删除操作已被提交至数据库。")
            });
            $("#saveAdd").click(function (){
               alert("添加组信息已提交到数据库。添加成功！")
            });
        });
    </script>
    <%}%>
    <script>
        $(function (){
            $(".description").on("click",".btn.btn-outline-primary.show-desc",function (){
                // alert("2232323")
                $(".collapse.show").removeClass("show")
            });
            $(".card.card-body").on("click",".btn.btn-outline-primary.show-desc",function (){
                // alert("2232323")
                $(".collapse.show").removeClass("show")
            });
        });
    </script>
</div>
</body>
</html>
